<template>
  <div class="rightThree">
    <div>
      <moduleTitle :name="title"></moduleTitle>
    </div>
    <div class="two-echarts">
      <div id="elliptical"></div>
      <div id="cirque"></div>
    </div>
  </div>
</template>

<script>
import moduleTitle from '@/components/moduleTitle'

export default {
  name: 'SdssJddsZhgjWebRightThree',
  components: {
    moduleTitle,
  },
  props: {
    propsthree: Object,
  },
  data() {
    return {
      title: '服务监控',
      num: 1,
      myChart: null,
      myChartSecond: null,
      echartData: {},
    }
  },
  watch: {
    propsthree: {
      immediate: true,
      deep: true,
      handler: function (newarr, olbarr) {
        if (newarr) {
          console.log(newarr, '1111111111111111111111111')
          this.echartData = newarr.count
          // debugger
          this.$nextTick(() => {
            this.createElliptical()
            this.createCirque()
          })
        }
      },
    },
  },
  mounted() {
    // window.addEventListener('resize', () => {
    //   console.log('监听到窗口变化了')
    //   this.myecharts.resize() // 窗口发生改变就更新echarts
    //   this.myChartSecond.resize() // 窗口发生改变就更新echarts
    // })
  },
  beforeDestroy() {
    // window.removeEventListener('resize', this.myecharts)
    // window.removeEventListener('resize', this.myChartSecond)
  },

  methods: {
    createElliptical() {
      this.myChart = this.$echarts.init(document.getElementById('elliptical')) //也可以通过$refs.newCharts的方式去获取到dom实例。
      var scale = 1
      let echartData = [
        {
          value: this.echartData.useCount * 1 + 1,
          name: '正常',
          unit: '个',
        },
        {
          value: this.echartData.unUseCount,
          name: '异常',
          unit: '个',
        },
      ]
      var legendData = echartData.map((v) => v.name)
      let option
      option = {
        legend: {
          data: legendData,
          orient: 'vertical',
          itemHeight: this.num * 10,
          itemWidth: this.num * 10,

          right: '30%',
          bottom: '0%',
          textStyle: {
            color: '#FFFFFF',
            fontSize: 12 * this.num,
            // padding:[-this.num * 5, 0, 0, 0],
            rich: {
              title: {
                fontSize: this.num * 18,
                color: '#FFFFFF',
                padding: [this.num * 5, 0, 0, 0],
              },
              value: {
                fontSize: this.num * 18,
                fontWeight: '600',
                lineHeight: 25,
                padding: [this.num * 4, 0, 0, 0],
              },
              text: {
                fontSize: this.num * 18,
                textAlign: 'right',
                padding: [this.num * 5, 0, 0, 0],
              },
            },
          },
          formatter: function (name) {
            let target = ''
            for (var i = 0; i < echartData.length; i++) {
              if (echartData[i].name == name) {
                target = echartData[i].value
              }
            }
            return '{title|' + name + '}   {value|' + target + '}' + ' {text| 个}'
          },
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: [, '50%'],
            center: ['50%', '35%'],
            hoverAnimation: false,
            color: ['#3AD3F7', '#f53758'],
            label: {
              normal: {
                formatter: function (params, ticket, callback) {
                  var total = 0 //考生总数量
                  var percent = 0 //考生占比
                  echartData.forEach(function (value, index, array) {
                    total += value.value
                  })
                  percent = ((params.value / total) * 100).toFixed(1)
                  return '{normal|' + params.name + ' ' + percent + '%}\n'
                },
                padding: [-50 * this.num, this.num],
                rich: {
                  normal: {
                    fontSize: 14 * this.num,
                    color: '#FFFFFF',
                    align: 'right',
                  },
                  value: {
                    fontSize: 26 * this.num,
                  },
                },
              },
            },
            labelLine: {
              length: 5 * this.num,
              length2: 50 * this.num,
            },
            data: echartData,
          },
        ],
      }
      this.myChart.setOption(option)
      // this.myChart.resize()
    },
    createCirque() {
      if (this.myChartSecond) {
        this.myChartSecond.dispose()
      }

      let allCount = this.echartData.apiCount * 1 + this.echartData.unUseCount * 1 + 1
      this.myChartSecond = this.$echarts.init(document.getElementById('cirque')) //也可以通过$refs.newCharts的方式去获取到dom实例。
      // 图形的大小是 220*200 其他的范围自行调整
      // 模糊点：  itemHeight。itemWidth,  itemGap  是设置icon 相关大小的
      const alarmColor = ['#Fbdd00', '#53ddfb', '#4bcc27']
      let option
      option = {
        color: alarmColor,
        title: [
          {
            text: '{val|' + allCount + '} 个\n{name| 服务总数 }',
            top: '25%',
            left: '43%',
            textAlign: 'center',
            textStyle: {
              fontSize: 18,
              color: '#ffffff',
              fontWeight: 'normal',
              rich: {
                name: {
                  fontSize: 18 * this.num,
                  color: '#ffffff',
                  padding: [10 * this.num, 0, 0, 0],
                },
                val: {
                  fontSize: 18 * this.num,
                  fontWeight: 'bold',
                  color: '#ffffff',
                },
              },
            },
          },
        ],
        grid: {
          left: 10 * this.num,
          right: 10 * this.num,
          bottom: 20 * this.num,
          top: 0,
          containLabel: true,
        },
        legend: {
          show: true,
          left: 'center',
          top: 'bottom',
          orient: 'vertical',
          itemHeight: 10 * this.num,
          itemWidth: 10 * this.num,
          itemGap: 10 * this.num,
          icon: 'rect',
          textStyle: {
            color: '#ffffff',
            fontSize: 18 * this.num,
          },
        },
        series: [
          {
            symbolSize: 10,
            type: 'pie',
            radius: ['38%', '56%'],
            center: ['45%', '36%'],
            data: [
              {
                name: '第三方服务  ' + this.echartData.unUseCount,
                value: this.echartData.unUseCount,
              },
              {
                name: '空间服务 ' + 1,
                value: 1,
              },
              {
                name: 'API服务  ' + this.echartData.apiCount,
                value: this.echartData.apiCount,
              },
            ],
            label: {
              show: false,
            },
            hoverAnimation: false,
            itemStyle: {
              normal: {
                // borderColor: bgColor,
                borderWidth: 1,
              },
            },
          },
        ],
      }
      this.myChartSecond.setOption(option)
      // this.myChartSecond.resize()
    },
  },
}
</script>

<style lang="scss" scoped>
.rightThree {
  width: 100%;
  height: 35%;
  // background-color: purple;
}
.two-echarts {
  width: 100%;
  height: 100%;
  display: flex;
  margin-top: -0.8259vh;
}
#elliptical {
  width: 55%;
  height: 100%;
}

#cirque {
  width: 45%;
  height: 100%;
}
</style>
